<script setup>

import {ref} from 'vue';
import {useRoute, useRouter} from 'vue-router';
//引入仓库详情数据
import {useDetailStore} from '/src/store/modules/HospitalDetail.js'
// 引入用户仓库
import {useUserStore} from '@/store/modules/user.js'

const userStore = useUserStore()
const router = useRouter()
const $route = useRoute()

const hospitalStore = useDetailStore();
//当前选择的科室索引
const currentIndex = ref(0);
//左侧大的科室点击的事件
const changeIndex = (index) => {
  currentIndex.value = index;
  //点击导航获取右侧科室(大的科室H1标题)
  const allH1 = document.querySelectorAll(".cur");
  //滚动到对应科室的位置
  allH1[currentIndex.value].scrollIntoView({
    behavior: "smooth", //过渡动画效果
    block: "start", //滚动到位置 默认起始位置
  });
};

// 点击科室跳转到挂号页面
const showLogin = (item) => {
  if (!userStore.userInfo.token) {
    userStore.dialogFormVisible = true;
    // 未登录跳转到登录页面
  } else {
    router.push({
      path: '/hospital/register-1',
      query: {
        hoscode: $route.query.hoscode,
        depcode: item.depcode,
      }
    })
  }
}


</script>

<template>
  <div class="register">

    <!-- 顶部信息 -->
    <div class="top">
      <h2>{{ hospitalStore.hospitalDetail.hospital?.hosname }}</h2>
      <img src="@/assets/01.png" alt="logo"/>
      <h3>医院等级：{{ hospitalStore.hospitalDetail.hospital?.param.hostypeString }}</h3>
    </div>

    <!-- 内容信息 -->
    <div class="content">
      <div class="left">
        <img :src="`data:image/jpeg;base64,${hospitalStore.hospitalDetail.hospital?.logoData}`" alt="logo">
      </div>

      <div class="right">
        <div class="rule-1">
          <span>< 一 >&nbsp;挂号规则：</span>
          <div class="rule-text">
            <div class="time">
              <p> 预约周期：10天</p>
              <p> 放号时间：{{ hospitalStore.hospitalDetail.bookingRule?.releaseTime }}</p>
              <p> 停号时间：{{ hospitalStore.hospitalDetail.bookingRule?.stopTime }}</p>
            </div>
            <p> 退号时间：就诊前一工作日{{
                hospitalStore.hospitalDetail.bookingRule?.quitTime
              }}前可取消，逾期不予受理。</p>
          </div>
        </div>
        <div class="rule-2">
          <span>< 二 >&nbsp;医院预约规则：</span>
          <div class="rule-text"
               v-for=" (item, index) in hospitalStore.hospitalDetail.bookingRule?.rule"
               :key="index"
          >
            <p> {{ item }}</p>
          </div>
        </div>
      </div>
    </div>

    <!-- 科室信息 -->
    <div class="department">
      <h2>选择科室:</h2>
      <div class="bottomNav">
        <div class="leftNav">
          <ul>
            <li
                v-for="(department, index) in hospitalStore.departmentList"
                :key="department.depcode"
                :class="{active: index === currentIndex}"
                @click="changeIndex(index)"
            >
              {{ department.depname }}
            </li>
          </ul>
        </div>

        <div class="rightNav">
          <div class="showInfo"
               v-for="department in hospitalStore.departmentList"
               :key="department.depcode"
               :class="{active: index === currentIndex}"
          >
            <h1 class="cur">{{ department.depname }}</h1>
            <!-- 每一个大的科室下小科室 -->
            <ul>
              <li
                  @click="showLogin(item)"
                  v-for="item in department.children"
                  :key="item.depcode"
              >
                {{ item.depname }}
              </li>
            </ul>

          </div>
        </div>
      </div>
      <el-backtop :bottom="120">
        <div style="
        height: 50px;
        width: 150px;
        background-color: #e4f0fa;
        border-radius: 10px;
        text-align: center;
        line-height: 50px;
        color: #1989fa;
        font-size: 16px;
      ">
          BachTop
        </div>
      </el-backtop>
    </div>

  </div>
</template>

<style scoped lang="scss">
.register {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;

  .top {
    width: 100%;
    height: 60px;
    display: flex;
    margin-bottom: 20px;
    align-items: center;
    border-radius: 5px;
    box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.2);

    h2 {
      font-size: 28px;
      line-height: 60px;
      margin: 10px;
    }

    img {
      width: 40px;
      height: 40px;
      margin: 10px;
    }

    h3 {
      margin: 10px;
      color: #7f7f7f;
    }
  }

  .content {
    display: flex;
    background-color: #f5f5f5;
    border-radius: 5px;

    .left {
      width: 100px;
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      align-content: center;
      margin: 10px;

      img {
        width: 80px;
        height: 80px;
        border-radius: 50%;
      }
    }

    .right {
      width: calc(100% - 120px);
      display: flex;
      flex-direction: column;
      font-family: Arial, sans-serif;

      .rule-1, .rule-2 {
        margin: 15px 0px;
        box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.2);

        span {
          font-size: 20px;
          font-weight: bold;
          color: #f89258;
        }

        .rule-text {
          margin-top: 5px;

          .time {
            display: flex;

            p {
              font-size: 16px;
              margin: 10px 50px;
              color: #7f7f7f;
            }
          }

          p {
            font-size: 16px;
            margin: 10px 50px;
            color: #7f7f7f;
          }
        }
      }
    }
  }

  .department {
    display: flex;
    flex-direction: column;
    margin-top: 20px;

    h2 {
      font-size: 24px;
      margin: 10px;
    }

    .bottomNav {
      display: flex;
      width: 100%;

      .leftNav {
        flex: 1;
        height: 800px;

        ul {
          width: 100%;
          display: flex;
          flex-direction: column;
          list-style: none;

          li {
            height: 50px;
            line-height: 50px;
            text-align: center;
            font-size: 18px;
            font-weight: bold;
            color: #7f7f7f;
            background-color: rgb(248, 248, 248);
            border-bottom: 1px solid #cff0fa;
            cursor: pointer;

            &:hover {
              background-color: #f6fdff;
            }

            &.active {
              color: #f89258;
              font-weight: bold;
              border-left: 5px solid #f89258;
              background-color: #ececec;
            }
          }
        }
      }

      .rightNav {
        flex: 4;
        height: 800px;
        overflow-y: auto;

        &::-webkit-scrollbar {
          display: none;
        }

        .showInfo {
          display: flex;
          flex-direction: column;
          font-family: Arial, sans-serif;

          h1 {
            color: #282727;
            font-size: 20px;
            font-weight: bold;
            padding: 10px 20px;
            margin: 5px 10px;
            background: #c9f1ff;
            border-radius: 5px;
          }

          ul {
            display: flex;
            flex-wrap: wrap;
            list-style: none;
            margin: 10px;
            padding: 10px;
            border: 1px solid #f89258;
            border-radius: 5px;

            li {
              color: #7f7f7f;
              width: 31%;
              font-size: 18px;
              margin: 8px;

              &:hover {
                color: #4990f1;
                cursor: pointer;
              }
            }
          }
        }

      }
    }
  }
}

</style>